<template>
  <div v-loading="loading" class="game_banner">
    <div class="game_banner_bg">
      <img v-if="trainInfo.backgroundUrl" :src="getStaticFileUrl(trainInfo.backgroundUrl)" alt="">
    </div>
    <div class="game_content">
      <div class="game_logo_name">
        <img v-if="trainInfo.logoUrl" class="game_logo" :src="getStaticFileUrl(trainInfo.logoUrl)" alt="">
        <span class="game_name gl_db_ellipsis">{{ trainInfo.name }}</span>
      </div>
      <div class="game_detaile gl_clear">
        <div class="left_detaile_message">
          <div class="game_detaile_item">
            <span>报道注册时间：</span>
            <span>{{ formatCheckInTimeToCHI }}</span>
          </div>
          <div class="game_detaile_item">
            <span>培训时间：</span>
            <span>{{ formatTrainTimeToCHI }}</span>
          </div>
          <div class="game_detaile_item gl_ellipsis" :title="trainInfo.contactPerson">
            <span>联系人：</span>
            <span>{{ trainInfo.contactPerson }}</span>
          </div>
          <div class="game_detaile_item">
            <span>联系电话：</span>
            <span>{{ trainInfo.contactPhoneNumber }}</span>
          </div>
          <div class="game_entry_btn">
            <div
              v-if="trainInfo.approveStatusCode === 'ApproveSuccess' && trainInfo.isPublished && isInTrainCycle && !inEntryRoute"
              style="margin-right: 37px"
              class="entry_btn btn_bg_red"
              @click="clickJump('TrainEnter')"
            >
              培训报名
            </div>
            <div
              v-if="trainInfo.approveStatusCode === 'ApproveSuccess' && trainInfo.isPublished && isShowLogistic && !inEntryRoute"
              class="entry_btn btn_bg_blue"
              @click="clickJump('TrainLogistics')"
            >
              后勤服务
            </div>
          </div>
          <div class="game_rules">
            培训相关条例：
            <span class="download_file" @click="regulationsVisible = true">《报名须知》</span>
            <!-- <a class="download_file" target="_blank" :href="getStaticFileUrl(trainInfo.entryNoticeUrl)">《报名须知》</a> -->
          </div>
        </div>
        <div>
          <div id="qrcode" class="qr_code gl_mb_10" />
          <div class="qr_msg">微信扫码在小程序报名</div>
        </div>
      </div>
    </div>
    <div class="cust">
      <el-button type="success" icon="el-icon-phone-outline" round @click="()=>{visible='ture'}">联系客服</el-button>
    </div>
    <el-dialog title="联系客服" width="30%" :visible.sync="visible">
      <div class="customerImg">
        <img class="customer" src="@/assets/images/customer.png" alt="">
      </div>
    </el-dialog>

    <!-- 选择支付方式弹框 -->
    <el-dialog class="gl_dialog_TitleLine" title="培训相关条例" :visible.sync="regulationsVisible" :close-on-click-modal="false" width="1000px">
      <div class="notice">
        <div v-if="trainInfo.entryNoticeUrl" class="attachment gl_py_10">
          <span>附件下载：</span>
          <a
            v-if="trainInfo.entryNoticeUrl"
            class="download_file gl_color_error"
            target="_blank"
            :href="getStaticFileUrl(trainInfo.entryNoticeUrl)"
          >报名须知</a>
        </div>
        <div v-if="trainInfo.entryNotice" style="height: 400px; overflow-y: auto;color: initial;font-size:initial;">
          <div v-html="trainInfo.entryNotice" />
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { getToken } from '@/lib/auth';
import QRCode from 'qrcodejs2';
import {
  api_GET_TrainTrainningByRoute
} from '@/extend/api/trainswaggerApi/app';
import {
  api_GET_EventsManagementLogisticEntryLogisticSetings // 获取培训后勤设置的模块信息
} from '@/extend/api/gameswaggerApi/app';
import {
  Api_GET_EventsManagementLogisticEntryLogisticSetingsQO
} from '@/lib/form/game/swaggerForm';

export default {
  name: 'GameBanner',
  data() {
    return {
      visible: false,
      tokenInfo: getToken(),
      loading: false,
      isShowLogistic: false, // 是否显示后勤服务按钮
      LogisticQO: new Api_GET_EventsManagementLogisticEntryLogisticSetingsQO(),
      trainInfo: {},
      trainId: '',
      inEntryRoute: false,
      regulationsVisible: false,
      wxQrCodeBaseUrl: `${WEB_CONFIG.VUE_APP_API_WXQRCODE}`
    };
  },
  computed: {
    // 格式化培训开始结束时间 -> '2020年01月12日 ~ 2020年01月15日';
    formatTrainTimeToCHI () {
      const startTime = this.trainInfo.startTime ? this.trainInfo.startTime.slice(0, 10) : '';
      const endTime = this.trainInfo.endTime ? this.trainInfo.endTime.slice(0, 10) : '';

      const sTarr = startTime.split('-');
      const eTarr = endTime.split('-');
      return `${sTarr[0] || '-'}年${sTarr[1] || '-'}月${sTarr[2] || '-'}日 ~ ${eTarr[0] || '-'}年${eTarr[1] || '-'}月${eTarr[2] || '-'}日`;
    },
    // 格式化报道初测时间
    formatCheckInTimeToCHI () {
      const startTime = this.trainInfo.checkInStartTime ? this.trainInfo.checkInStartTime.slice(0, 10) : '';
      const endTime = this.trainInfo.checkInEndTime ? this.trainInfo.checkInEndTime.slice(0, 10) : '';
      const sTarr = startTime.split('-');
      const eTarr = endTime.split('-');
      return `${sTarr[0] || '-'}年${sTarr[1] || '-'}月${sTarr[2] || '-'}日 ~ ${eTarr[0] || '-'}年${eTarr[1] || '-'}月${eTarr[2] || '-'}日`;
    },
    gameInfoStatusCode () {
      const _trainInfo = this.trainInfo.trainningApproveStatus || {};
      return _trainInfo.code;
    },
    isInTrainCycle () { // 是否在培训周期内
      if (this.trainInfo.entryStartTime && this.trainInfo.entryEndTime) {
        let _today = new Date();
        const _year = _today.getFullYear();
        const _month = _today.getMonth() >= 9 ? _today.getMonth() + 1 : '0' + (_today.getMonth() + 1);
        const _date = _today.getDate() > 9 ? _today.getDate() : '0' + _today.getDate();
        _today = _year + '-' + _month + '-' + _date;

        const _start = this.trainInfo.entryStartTime.slice(0, 10);
        const _end = this.trainInfo.entryEndTime.slice(0, 10);
        if (_today >= _start && _today <= _end) {
          return true;
        } else {
          return false;
        }
      } else {
        return false;
      }
    }
  },
  watch: {
    $route: {
      deep: true,
      immediate: true,
      handler(val) {
        if (val.name === 'TrainEnter' || val.name === 'TrainLogistics') {
          this.inEntryRoute = true;
        } else {
          this.inEntryRoute = false;
        }
      }
    }
  },
  created() {
    const $route = this.$route;
    const _paramsId = $route.params.id;
    this.gameRoute = _paramsId.split('_')[0];
    this.tenantId = _paramsId.split('_')[1];
    this.getGameInfoByGameRoute();
  },
  mounted() {
    this.createdQrCode();
  },
  methods: {
    // 生成二维码
    createdQrCode() {
      const _this = this;
      new QRCode('qrcode', {
        width: 155,
        height: 155,
        text: `${_this.wxQrCodeBaseUrl}?a=train_${_this.$route.params.id}`
        // text: `${location.origin}/mbleague.html#/home/${_this.$route.params.id}/info`
      });
      // https://manage-test.wtwuxicenter.com/wx_qrcode?a=league_mfss
    },
    // 根据赛事路由获取赛事信息
    getGameInfoByGameRoute() {
      const trainQO = {};
      trainQO.route = this.gameRoute;
      trainQO.IncludeTrainningType = true;
      trainQO.IncludeTrainningStatus = true;
      trainQO.IncludeTrainningApproveStatus = true;

      trainQO.IncludeProvince = true;
      trainQO.IncludeCity = true;
      trainQO.IncludeCounty = true;
      trainQO.IncludeCommittee = true;
      trainQO.IncludeSetting = true;
      trainQO.IncludeSchedules = true;
      trainQO.IncludeHotels = true;
      trainQO.IncludeMembershipFees = true;
      trainQO.IncludeFees = true;

      if (this.tenantId) {
        trainQO.__tenant = this.tenantId;
      }

      this.loading = true;
      api_GET_TrainTrainningByRoute(trainQO)
        .then(res => {
          if (res.isDisabled) {
            this.$parent.isDisabled = true;
          } else {
            this.$parent.isDisabled = false;
          }
          this.loading = false;
          this.trainInfo = res || {};
          this.getLogisticSetings(this.trainInfo.id);
          this.trainId = this.trainInfo.id;
          this.$emit('getTrainInfoSuccess', this.trainInfo);
        });
    },
    // 获取该培训的后勤设置选项
    getLogisticSetings(id) {
      var that = this;
      that.loading = true;
      that.LogisticQO.providerKey = id;
      api_GET_EventsManagementLogisticEntryLogisticSetings(that.LogisticQO).then(res => {
        const list = res || [];
        that.isShowLogistic = list.length > 0 && !that.$route.query.id;
        that.loading = false;
      }, (error) => {
        that.loading = false;
        that.$message({ type: 'error', message: error.error.message || '获取后勤设置失败' });
      });
    },
    // 获取文件地址
    getStaticFileUrl(relativeUrl) {
      if (!relativeUrl) return '';
      return WEB_CONFIG.VUE_APP_STATIC_FILE_RUL + relativeUrl;
    },
    // 处理背景图
    handleBackgroundImg(relatvieUrl) {
      return `url('${this.getStaticFileUrl(relatvieUrl)}');`;
    },
    // 点击跳转页面
    clickJump(name) {
      this.$router.push({
        name: name,
        query: { id: this.trainId }
      });
    }
  }
};
</script>

<style scoped>
.game_banner {
  position: relative;
  width: 1200px;
  height: 298px;
  border-radius: 8px;
  box-shadow: 0px 16px 70px 0px rgba(0,0,0,0.10);
  margin: 20px auto;
  overflow: hidden;
}
.game_banner_bg {
  float: left;
  width: 555px;
  height: 298px;
  border-radius: 10px;
  overflow: hidden;
}
.game_banner_bg img {
  width: 100%;
  height: 100%;
  vertical-align: middle;
  border-radius: 8px 0 0 8px;
}
.game_content {
  float: left;
  width: calc(100% - 555px);
  padding: 8px 20px 8px 20px;
  box-sizing: border-box;
}
.game_logo_name {
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
}
.game_logo_name .game_logo {
  width: 63px;
  height: 63px;
  margin-right: 16px;
  border-radius: 50%;
  vertical-align: middle;
}
.game_logo_name .game_name {
  width: calc(100% - 80px);
  font-size: 24px;
  line-height: 24px;
  vertical-align: middle;
}
.game_detaile {
  display: flex;
}
.left_detaile_message {
  position: relative;
  float: left;
  margin-top: 21px;
  width: 430px;
}

.left_detaile_message .game_detaile_item {
  padding-right: 10px;
  font-size: 16px;
  line-height: 24px;
  margin-bottom: 2px;
}
.game_entry_btn {
  width: 100%;
  padding: 6px 0 10px 0;
  box-sizing: border-box;
}
.game_entry_btn .entry_btn {
  width: 140px;
  height: 48px;
  border-radius: 8px;
  font-size: 16px;
  line-height: 48px;
  color: #fff;
  cursor: pointer;
  text-align: center;
  transition: all 0.3s ease;
  display: inline-block;
}
.btn_bg_red {
  background: #dc1d1d;
}
.btn_bg_blue {
  background: #1990FF;
}
.game_entry_btn .entry_btn:hover {
  opacity: 0.8;
}
.game_rules {
  font-size: 14px;
  color: #353434;
}
.game_rules .download_file {
  color: #dc1d1d;
  font-weight: 700;
}
.game_rules .download_file:hover {
  text-decoration: underline;
}
.customerImg {
    /* position: fixed;
    top: 80px;
    right: 10px;
    border-radius: 1px; */
    display: flex;
    justify-content: center;
    align-items: center;
}
.cust {
    position: fixed;
    bottom: 300px;
    margin-left: 1222px;
    border-radius: 1px;
    z-index: 999;
}
.customer {
  width: 440px;
  margin: 0 auto;
}
.el-button  ::v-deep  i {
  font-size: 20px;
}
.el-button  ::v-deep  span {
  font-size: 20px;
}

</style>
